<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
</head>
<body>
    <ul>
        <li>
            <h2>基本表格</h2>
            <table style="border-color: aqua;"  align="center" width = "200px" height = "100px" border="2" cellspacing = "2">
                <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </li>
             
        <li>
            <h2>网格表格</h2>
            <table style="border-color:aquamarine;"  align="center" width = "600px" height = "500px" border="2" cellspacing = "2">
                <tbody>
                    <tr align="center" valign = "middle">
                        <td colspan="3">网站名称</td>
                    </tr>
                    <tr>
                        <td align="left">网站标题</td>
                        <td colspan="2" align="right">搜索框</td>
                    </tr>
                    <tr>
                        <td>左边</td>
                        <td>中间</td>
                        <td>右边</td>
                    </tr>
                    <tr align="center" valign = "middle">
                        <td colspan="3">网站底部信息</td>
                    </tr>
                </tbody>
            </table>
        </li>
    

        <li>
            <h2>综合表格</h2>
            <table  style="border-color:rgb(255, 127, 217);"  align="center" width = "800px" height = "400px" border="10" cellspacing = "2">
              <tbody>
                <tr>
                    <td rowspan="8">10</td>
                    <td rowspan="4" align="center" valign = "middle">11</td>
                    <td rowspan="2">12</td>
                    <td>13</td>
                </tr>
                <tr>
          
                    <td>13</td>
                </tr>
                <tr>
          
 
                    <td rowspan="2">12</td>
                    <td>13</td>
                </tr>
                <tr>
             
 
 
                    <td>13</td>
                </tr>
                <tr>
               
                    <td rowspan="4" align="center" valign = "middle">11</td>
                    <td rowspan="2">12</td>
                    <td>13</td>
                </tr>
                <tr>
               
 
   
                    <td>13</td>
                </tr>
                <tr>
                   
 
                    <td rowspan="2">12</td>
                    <td>13</td>
                </tr>
                <tr>
            
     
                    <td>13</td>
                </tr>
              </tbody>
            </table>
        </li>

        <li>
            <h2>表单信息</h2>
            <form action="https://search.jd.com/search" >
                <!-- 文本输入框 -->
                账号: <input type="text" name = "account"> <br>
                邮箱: <input type="email" ><br>
                密码: <input type="password" name = "pwd"> <br>
                性别: <input type="radio" name="gender" value="male"> 男
                <input type="radio" name="gender" value = "female"> 女 <br>
                技能: <input type="checkbox"> html+css
                <input type="checkbox"> javascript
                <input type="checkbox">php
                <input type="checkbox"> java <br>

                头像: 
                <input type="file" id="fileSelecter"><br>

                现居地:
                <select name="Province">
                    <option >广东省</option>
                    <option >湖北省</option>
                    <option >河北省</option>
                </select>

                <select name="City">
                    <option >广州市</option>
                    <option >东莞市</option>
                </select>

                <select name="Region">
                    <option >天河区</option>
                    <option >花都区</option>
                    <option >白云区</option>
                </select><br>

                留言:
                <textarea name="message" cols="23" rows="7"></textarea> <br>
                <button>提交</button>
                <button type="reset">重置</button>
            </form>

        </li>
     
    </ul>
</body>
</html>